<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!--<meta name="_csrf" th:content="${_csrf.token}"/>
  <meta name="_csrf_header"  th:content="${_csrf.headerName}"/>-->
  <title>叮叮金融-登录</title>
  <link rel="stylesheet" href="/css/login/materialdesignicons.min.css">
  <link rel="stylesheet" href="/css/login/vendor.bundle.base.css">
  <link rel="stylesheet" href="/css/login/style.css">
  <style>
    .btn-qqLoginBtn{
      background-color: #4fc8ff;
      color: white;
    }
    .btn-qqLoginBtn:hover{
      background-color: #03A9F4;
      color: white;
    }
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="container-scroller d-flex" style="background: url('/img/loginBG.jpg')">
    <div class="container-fluid page-body-wrapper full-page-wrapper d-flex">
      <div class="content-wrapper d-flex align-items-center auth px-0" style="box-shadow: #b9b9b9 3px 3px 8px 2px">
        <div class="row w-100 mx-0">
          <div class="col-lg-4 mx-auto">
            <div class="auth-form-light text-left py-5 px-4 px-sm-5" style="box-shadow: #b9b9b9 3px 3px 8px 2px">
              <h3>欢迎来到叮叮金融</h3>
              <hr>
              <span class="mt-2" style="font-size: 14px;color: #999">请登录</span>
              <form action="/userLogin" method="post" class="pt-3">
                <div class="form-group">
                  <input name="phone" type="phone" class="form-control form-control-lg" placeholder="手机号/邮箱">
                </div>
                <div class="form-group">
                  <input name="password" type="password" class="form-control form-control-lg" placeholder="密码">
                </div>
                <div class="mt-3">
                  <input id="submitBtn" type="button" value="登录" class="btn btn-block btn-success btn-lg font-weight-medium auth-form-btn">
                </div>
                <div class="my-2 d-flex justify-content-between align-items-center">
                  <div class="form-check">
                    <label class="form-check-label text-muted" style="cursor: pointer">
                      <input name="remember-me" type="checkbox" class="form-check-input">
                      自动登录
                    </label>
                  </div>
                  <a th:href="@{/forgot}" class="auth-link">忘记密码?</a>
                </div>
                <div class="mb-2">
                    <a th:href="${url}" type="button" class="btn btn-block btn-qqLoginBtn auth-form-btn">
                      <i class="mdi mdi-qqchat"></i>
                      <span class="mt-2">QQ登录</span>
                    </a>
                </div>
                <div class="text-center mt-4 font-weight-light">
                  没有账号? <a th:href="@{/register}">创建账号</a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <!-- content-wrapper ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <script th:src="@{/js/login/vendor.bundle.base.js}"></script>
  <script th:src="@{/js/login/off-canvas.js}"></script>
  <script th:src="@{/js/login/hoverable-collapse.js}"></script>
  <script th:src="@{/js/login/template.js}"></script>
  <script th:src="@{/js/jquery.min.js}"></script>
  <script th:src="@{/layer/layer.js}"></script>
</body>
<script>
  $(function () {
    $(document).keydown(function (e) {
      if (e.keyCode === 13) {
        $("#submitBtn").click();
      }
    });
  });
  $("#submitBtn").click(function () {
    var phone = $("input[name='phone']").val();
    var password = $("input[name='password']").val();
    var rememberMe = $("input[name='remember-me']").is(':checked');
    var loading = layer.load(1, {
      shade: [0.1,'#fff'] //0.1透明度的白色背景
    });

    var data = {
      "phone":phone,
      "password":password,
      "remember-me":rememberMe
    }
    //console.log(data)
    $.ajax({
      url:"/userLogin",
      type:"POST",
      data:data,
      dataType:"json",
      success:function (data) {
        layer.close(loading);
        console.log(data)
        if (data.msg == "success"){
          window.location.href = data.url;
        }else {
          layer.msg(data.msg);
        }
      },
      error:function () {
        //console.log("服务器异常")
      }
    })
  })
</script>
</html>
